<template>
	<view class="video-player" v-if="visible" @click="hide">
		<video class="video" :src="src" autoplay :show-fullscreen-btn="false"></video>
	</view>
</template>

<script>
	export default{
		props: ['src'],
		
		data () {
			return {
				visible: false
			}
		},
		
		methods:{
			show () {
				this.visible = true
			},
			
			hide () {
				this.visible = false
			}
		}
	}
</script>

<style lang="scss">
	.video-player{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: rgba(0,0,0,0.8);
		.video{
			width: 100%;
		}
	}
</style>
